import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:intl/intl.dart';
import 'package:family_app/src/features/finance/models/transaction_model.dart';
import 'package:family_app/src/theme/app_theme.dart';

// 使用主题颜色
Color get _kIncomeColor => AppTheme.incomeColor;
Color get _kExpenseColor => AppTheme.expenseColor;
const _kCardBackground = Colors.white; // 卡片背景色
const _kTextPrimary = Color(0xFF1F2937); // 主要文字颜色
const _kTextSecondary = Color(0xFF6B7280); // 次要文字颜色

/// 交易列表项组件
class TransactionListItem extends StatefulWidget {
  final TransactionModel transaction;
  final VoidCallback onTap;
  final VoidCallback onDelete;

  const TransactionListItem({
    Key? key,
    required this.transaction,
    required this.onTap,
    required this.onDelete,
  }) : super(key: key);

  @override
  State<TransactionListItem> createState() => _TransactionListItemState();
}

class _TransactionListItemState extends State<TransactionListItem>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _scaleAnimation;
  bool _isPressed = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 150),
      vsync: this,
    );
    _scaleAnimation = Tween<double>(
      begin: 1.0,
      end: 0.95,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    ));
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _onTapDown(TapDownDetails details) {
    setState(() => _isPressed = true);
    _animationController.forward();
  }

  void _onTapUp(TapUpDetails details) {
    setState(() => _isPressed = false);
    _animationController.reverse();
  }

  void _onTapCancel() {
    setState(() => _isPressed = false);
    _animationController.reverse();
  }

  @override
  Widget build(BuildContext context) {
    final isExpense = widget.transaction.isExpense;
    final amountColor = isExpense ? _kExpenseColor : _kIncomeColor;
    final iconBgColor = isExpense
        ? _kExpenseColor.withOpacity(0.1)
        : _kIncomeColor.withOpacity(0.1);
    final amountText = widget.transaction.formattedAmount;

    return AnimatedBuilder(
      animation: _scaleAnimation,
      builder: (context, child) {
        return Transform.scale(
          scale: _scaleAnimation.value,
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 16.w, vertical: 6.h),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16.r),
              gradient: AppTheme.cardGradient,
              boxShadow: _isPressed 
                  ? AppTheme.coloredShadow(amountColor, opacity: 0.2)
                  : AppTheme.lightShadow,
            ),
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                onTap: widget.onTap,
                onTapDown: _onTapDown,
                onTapUp: _onTapUp,
                onTapCancel: _onTapCancel,
                borderRadius: BorderRadius.circular(16.r),
                splashColor: amountColor.withOpacity(0.1),
                highlightColor: amountColor.withOpacity(0.05),
                child: Padding(
                  padding: EdgeInsets.all(16.r),
                  child: Row(
                    children: [
                      // 分类图标
                      Container(
                        width: 48.r,
                        height: 48.r,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              amountColor.withOpacity(0.1),
                              amountColor.withOpacity(0.05),
                            ],
                          ),
                          borderRadius: BorderRadius.circular(14.r),
                          border: Border.all(
                            color: amountColor.withOpacity(0.2),
                            width: 1,
                          ),
                        ),
                        child: Icon(
                          TransactionCategories.getCategoryIcon(widget.transaction.category),
                          color: amountColor,
                          size: 24.r,
                        ),
                      ),
                      SizedBox(width: 16.w),
                      // 交易信息
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(
                                  child: Text(
                                    widget.transaction.category,
                                    style: TextStyle(
                                      fontSize: 16.sp,
                                      fontWeight: FontWeight.w600,
                                      color: _kTextPrimary,
                                      height: 1.3,
                                      letterSpacing: 0.2,
                                    ),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                                Container(
                                  padding: EdgeInsets.symmetric(
                                    horizontal: 12.w,
                                    vertical: 6.h,
                                  ),
                                  decoration: BoxDecoration(
                                    color: amountColor.withOpacity(0.1),
                                    borderRadius: BorderRadius.circular(20.r),
                                    border: Border.all(
                                      color: amountColor.withOpacity(0.2),
                                      width: 1,
                                    ),
                                  ),
                                  child: Text(
                                    amountText,
                                    style: TextStyle(
                                      fontSize: 15.sp,
                                      fontWeight: FontWeight.w700,
                                      color: amountColor,
                                      height: 1.3,
                                      letterSpacing: 0.3,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 6.h),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Expanded(
                                  child: Text(
                                    widget.transaction.description?.isNotEmpty == true
                                        ? widget.transaction.description!
                                        : '无备注',
                                    style: TextStyle(
                                      fontSize: 13.sp,
                                      color: _kTextSecondary,
                                      height: 1.4,
                                    ),
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                                SizedBox(width: 8.w),
                                Text(
                                  DateFormat('MM/dd HH:mm', 'zh_CN')
                                      .format(widget.transaction.transactionDate),
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    color: _kTextSecondary.withOpacity(0.7),
                                    height: 1.4,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 8.w),
                      // 删除按钮
                      Container(
                        width: 36.r,
                        height: 36.r,
                        decoration: BoxDecoration(
                          color: Colors.red.withOpacity(0.1),
                          borderRadius: BorderRadius.circular(10.r),
                        ),
                        child: IconButton(
                          icon: Icon(
                            Icons.delete_outline_rounded,
                            size: 18.r,
                            color: Colors.red.shade400,
                          ),
                          onPressed: widget.onDelete,
                          padding: EdgeInsets.zero,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}
